<template>
  <div class="bookdetail">
      <van-sticky>
    <van-nav-bar right-text="按钮" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="share-o" @click="showShare = true" />
      </template>
    </van-nav-bar>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
      </van-sticky>
    <div class="book">
      <van-card :title="bookData.title" :thumb="imgUrl">
        <template #tags>
          <div class="author">
            <span>{{ feed.entry["pris:book"].category }}</span
            ><span>|</span
            ><span class="author-name">{{ bookData.author.name }}</span>
          </div>
          <div class="xingxing">
              <van-rate v-model="star" :size="13" allow-half void-icon="star" void-color="#eee" color="Gold" />
          </div>
          <div class="look"><span>{{feed.entry["pris:book"].words >10000? (feed.entry["pris:book"].words/10000).toFixed(1):feed.entry["pris:book"].words}}万字</span><span>{{feed.entry["pris:subscribe"].clicksCount}}</span></div>
          <div class="hot">{{feed.entry["pris:book"].wprice}}阅点/千字</div>
        </template>
      </van-card>
    </div>
    <div class="book-desr">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="简介" name="1">
        <template #default>
            <div class="content-txt">{{bookData.summary}}</div>
            <div class="bookclub">授权方：<span class="club">{{feed.entry["pris:book"].authorizer}}</span></div>
            <div class="booktype">作品类型：{{feed.entry["pris:book"].paydesc}}</div>
        </template>
        </van-collapse-item>
      </van-collapse>

      <div>
        <van-notice-bar
          color="#000"
          left-icon="info-o"
          background="#fff"
          mode="link"
          @click="gotoChapter(bookData.id)"
        >
          <template #default>
            <div class="default-box">
              <div class="default-left">共{{feed.entry["pris:book"].totalArticleCount[0]}}章</div>
              <div class="default-right" >{{feed.entry["pris:book"].allNeedBuy == 0? '已完结':'连载中'}}</div>
            </div>
          </template>
          <template #left-icon>
            <img src="../assets/list-most.png" alt="" />
          </template>
        </van-notice-bar>
      </div>
    </div>
    <div class="nav-top">
      <div class="nav-left">评论</div>
      <div class="nav-right">
        <img src="../assets/whitecomments.png" alt="" />
        <div>写评论</div>
      </div>
    </div>
    <div class="test">
      <comments :list="comments"></comments>
    </div>
    <div class="tail">
      <div class="tail-first">加入书架</div>
      <div class="tail-second">购买</div>
      <div class="tail-third" @click="gotoBookLook(bookData.id)">免费试读</div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import comments from "./components/comments.vue";
export default {
  components: { comments },
  name: "bookdetail",
  data() {
    return {
      showShare: false,
      activeNames: ["1"],
      comments:[],
      imgUrl: "",
      star:0,
      feed: {
        entry: {
          "pris:book": {
              totalArticleCount:[]
          },
          "pris:ranking":{},
          "pris:subscribe":{}
        },
      },
      bookData: { author: {},id:{} },
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  created() {
    let tel = this.$route.params;
    this.getImg(tel.id);
    // console.log(this.img);
    // console.log(tel.id);
    this.getBookData(tel.id, tel.title);
    this.getComments(tel.id)
    // let title = this.
    // console.log(tel);
  },
  methods: {
    gotoBookLook(id) {
      // console.log(title);
      this.$router.push({name:"BookContent",params:{id:id}})
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    getImg(id) {
      this.axios({
        method: "get",
        url: `book/info.json?sourceUuid=${id}`,
      })
        .then((result) => {
          this.imgUrl = result.data.data.book.cover;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getBookData(id, title) {
      this.axios({
        method: "get",
        url: `book/getsub.json?id=${id}&title=${title}`,
      })
        .then((result) => {
          this.bookData = result.data.feed.entry;
          this.feed = result.data.feed;
          this.star = Number(result.data.feed.entry["pris:ranking"].value)

        })
        .catch((err) => {
            console.log(err);
        });
    },
    getComments(id) {
        this.axios({
        method: "get",
        url: `comment/getComments.json?bookId=${id}`,
      })
        .then((result) => {
          // console.log(result.data.all.list);
          this.comments = result.data.all.list;
        })
        .catch((err) => {
            console.log(err);
        });
    },
    gotoChapter(id) {
        this.$router.push({name:'Chapter',params:{id:id}})
        // console.log(id);
    }
  },
};
</script>

<style lang="less" scoped>
.van-card__title {
  font-size: 14px;
}
.author-name {
  color: DeepSkyBlue;
}
.xingxing {
  margin-top: 5px;
}
.author {
  color: gray;
  margin-top: 5px;

  span {
    margin-right: 5px;
    font-size: 13px;
  }
}
.content-txt{
  font-size: 13px;
}
.look {
  margin-top: 5px;
  span {
    margin-right: 10px;
    color: Gray;
  }
}
.hot {
  margin-top: 5px;
  color: Gray;
}
/deep/.van-card__thumb img {
  width: 90px;
  height: 120px;
  border-radius: 0;

  vertical-align: middle;
}
.van-card {
  height: 140px;
  background-color: #fff;
}
/deep/.van-cell {
  span {
    font-size: 12px;
    color: gray;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}
/deep/.van-icon-arrow:before {
  color: gray;
}
/deep/.van-notice-bar__content {
  margin-left: 5px;
  font-size: 12px;
}
.default-box {
  width: 303px;
  display: flex;
  justify-content: space-between;
  .default-right {
    padding-right: 10px;
    color: #e4393c;
  }
}
.nav-top {
  background-color: #fff;
  display: flex;
  margin-top: 5px;
  justify-content: space-between;
  padding: 10px 10px;
}

.nav-left {
  color: gray;
  font-size: 16px;
  border-left: 3px solid #ccc;
  padding-left: 5px;
  line-height: 28px;
}
.nav-right {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
  padding: 5px 5px;
  border-radius: 3px;

  img {
    // width: 18px;
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
}
.test {
  // background-color: red;
//   padding-bottom: 50px;
}
/deep/.tail {
  display: flex;
  height: 48px;
  border-top: 1px solid WhiteSmoke;
  border-bottom: 1px solid WhiteSmoke;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  div {
    width: 124px;
    text-align: center;
    font-size: 15px;
    line-height: 48px;
    border-right: 1px solid whitesmoke;
  }
  .tail-third {
    background-color: red;
    color: #fff;
  }
}
.bookclub{
    font-size: 12px;
    margin-top: 5px;
}
.booktype{
    font-size: 12px;
}
.club{
    color: deepskyblue;
}
</style>